<template>
  <div class="recomMend">
    <div
      @click="$router.push('/detail?id=' + item.id)"
      class="item"
      v-for="item in list"
      :key="item.id"
    >
      <div class="top">
        <img :src="item.avatar" alt="" />
        <div class="right">
          <div class="title">{{ item.stem }}</div>
          <div class="username">
            <span>{{ item.creatorName }}</span>
            <span>|</span>
            <span>{{ item.createdAt }}</span>
          </div>
        </div>
      </div>
      <div class="middle">
        {{ item.content }}
      </div>
      <div class="bottom">
        <span>点赞 {{ item.likeCount }}</span>
        <span>|</span>
        <span>浏览 {{ item.views }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
 name: "RecomMend",
  data() {
    return {
      list: [],
    };
  },
  async created() {
    console.log(`面经列表${localStorage.getItem("token")}`);
    const res = await axios({
      url: "http://interview-api-t.itheima.net/h5/interview/query",
      method: "GET",
      headers: {
        Authorization: `Bearer ${localStorage.getItem("token")}`,
      },
    });

    this.list = res.data.data.rows;
    console.log(this.list);
  },
};
</script>

<style lang="less" scoped>
.item {
 border: 1px solid #000;
 padding: 10px;
 margin: 10px;
.top {
 display: flex;

 img {
  width: 50px;
 height: 50px;
 border-radius: 50%;
 }

 .right {
 flex: 1;
 }
 }
}
// 超过两行显示省略号
.middle {
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
}
</style>